<template>
  <div>
    <h2 style="margin-left: 360px">用户管理</h2>
    <el-table :data="cutBean.records" style="width: 100%">
      <el-table-column prop="userName" label="用户名" width="200"/>
      <el-table-column prop="pwd" label="密码" width="150"/>
      <el-table-column prop="realName" label="真实姓名" width="200"/>
      <el-table-column fixed="right" label="操作" >
        <template #default="scope">
          <el-button type="danger"
                     @click="del(scope.row.id)">删除用户
          </el-button>
          <el-button type="success"
                     @click="findById(scope.row.id),updateVisible = true">修改权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage="cutBean.current"
        :page-size="cutBean.size"
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change="findByItem"
    />

    <div style="display: flex;margin-top: 50px;margin-left: 100px">
      <div>
        <el-button type="info" @click="addVisible = true">添加新用户</el-button>
      </div>

      <div style="margin-left: 200px">
        用户名称:<el-input v-model="selectObj.userName" style="width: 150px"/><br><br>
        <el-button type="info" @click="findByItem(1)"
                   style="margin-top: 50px;margin-left: 200px">查询
        </el-button>
      </div>
    </div>

    <div>
      <el-dialog
          v-model="addVisible"
          title="添加用户信息"
          width="40%"
          center
      >
        <el-form
            label-width="100px"
            style="max-width: 400px;"
        >
          <el-form-item label="用户名">
            <el-input v-model="addObj.userName"/>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="addObj.realName"/>
          </el-form-item>
          <el-form-item label="拥有角色">
            <el-checkbox-group v-model="roleIdArray" >
              <el-checkbox v-for="role in roleList" :key="role.id" :label="role.id" @change="findByRoleId">
                {{role.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="拥有权限">
            <el-tag size="large" type="danger"
                    v-for="power in powerList" :key="power.id" :label="power.id">
              {{ power.name }}
            </el-tag>
          </el-form-item>
        </el-form>

        <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">确定</el-button>
        <el-button type="primary" @click="addVisible = false,add()">添加</el-button>
      </span>
        </template>
      </el-dialog>
    </div>

    <div>
      <el-dialog
          v-model="updateVisible"
          title="修改用户权限"
          width="40%"
          center
      >
        <el-form
            label-width="100px"
            style="max-width: 400px;"
        >
          <el-form-item label="用户名">
            <el-input v-model="findObj.userName" disabled/>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="findObj.realName" disabled/>
          </el-form-item>
          <el-form-item label="当前角色">
            <el-checkbox-group v-model="roleIdArray">
              <el-checkbox v-for="role in this.roleList" :key="role.id" :label="role.id" @change="findByRoleId">
                {{role.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="拥有权限">
            <el-tag size="large" type="danger"
                    v-for="power in powerList" :key="power.id" :label="power.id">
              {{ power.name }}
            </el-tag>
          </el-form-item>
        </el-form>


        <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateVisible = false,this.roleIdArray = [],this.powerList=[]">确定</el-button>
        <el-button type="primary" @click="updateVisible = false,updateRole(findObj.userId)">修改</el-button>
      </span>
        </template>
      </el-dialog>
    </div>



  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutBean: {},
      selectObj: {},
      addObj: {},
      findObj:{},
      addVisible: false,
      updateVisible: false,
      roleIdArray:[],
      roleList:[],
      powerList:[],
      updateList:[]
    }
  },
  methods:{
    findByItem(pageNO){
      this.selectObj.pageNO = pageNO;
      axios.get("/project/user/findByItem", {
        params: this.selectObj
      }).then(resp => {
        this.cutBean = resp.data;
      })
    },
    add(){
      axios.get("/project/user/add",{
        params:{
          id:this.addObj.id,
          userName:this.addObj.userName,
          realName:this.addObj.realName,
          roleIdArray:this.roleIdArray.toString()
        }
      }).then(resp =>{
        if (resp.data == "ok"){
          this.addObj = {};
          this.roleIdArray = [];
          this.powerList = [];
          this.addVisible = false;
          this.findByItem(1)
        }
      })
    },
    findById(id){
      axios.get("/project/user/findById", {
        params: {id}
      }).then(resp => {
        this.findObj = resp.data;
        this.powerList = resp.data.powerList;
        // resp.data.roleList.forEach(n =>{
        //   this.roleIdArray.push(n.id)
        // })
        console.log(this.roleList)
        for (let i = 0; i <this.roleList.size ; i++) {
          this.roleIdArray.push(this.roleList[i].id)
        }
      });
    },
    updateRole(id){
      axios.get("/project/user/updateRoles",{
        params:{
          id,
          roleId:this.roleIdArray.toString()
        }
      }).then(resp => {
        if (resp.data == "ok"){
          this.roleIdArray = [];
          this.powerList = [];
          this.updateVisible = false;
        }
      });
    },
    del(id){
      axios.get("/project/user/del",{
        params:{id}
      }).then(resp =>{
        if (resp.data == "ok"){
          this.findByItem(1)
        }
      })
    },
    findAll(){
      axios.get("/project/role/findAll").then(resp =>{
        this.roleList = resp.data;

      })
    },
    findByRoleId(){
      this.updateList=[];
      axios.get("/project/power/findByItem",{
        params:{
          roles:this.roleIdArray.toString()
        }
      }).then(resp =>{
        this.updateList=resp.data;
        this.powerList=this.updateList;
      })
    }
  },
  created() {
    this.findByItem(1);
    this.findAll();
  }
}
</script>

<style scoped>
</style>